<template>
  <div class="form-data" v-on="$listeners">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :layout="inline ? 'inline' : ''" v-if="options && options.length > 0">
      <a-row v-for="(row, index) in options" :key="index">
        <div :class="{ 'form-item-inline': inline }" v-for="(col, colIndex) in row" :key="colIndex">
          <slot v-if="col.slotName" :name="col.slotName" ></slot>
          <a-form-model-item v-else labelAlign="right" :label="col.label" :prop="col.field ? col.field : ''" :key="colIndex">
            <template v-if="col.type === 'input'">
              <a-input
                allowClear
                size="large"
                :placeholder="col.placeholder ? col.placeholder : inputPlaceholder"
                @keyup.enter="$emit('enterSearchData')"
                v-bind="col.props"
                @blur="changeValue"
                v-on="$listeners"
                v-model.trim="form[col.field]"
              />
            </template>
            <template v-else-if="col.type === 'select'">
              <SelectOption :enums="col.enums" type="select" v-model="form[col.field]" v-bind="col.props" v-on="col.events"></SelectOption>
            </template>
            <template v-else-if="col.type === 'radio'">
              <SelectOption :enums="col.enums" type="radio" v-model="form[col.field]" v-bind="col.props" v-on="col.events"></SelectOption>
            </template>
            <template v-else-if="col.type === 'checkbox'">
              <SelectOption :enums="col.enums" type="checkbox" v-model="form[col.field]" v-bind="col.props" v-on="col.events"></SelectOption>
            </template>
            <template v-else-if="col.type === 'dateRange'">
              <a-range-picker
                :locale="locale"
                style="width:400px!important"
                v-model="form[col.field]"
                v-bind="col.props"
                v-on="col.events"
                show-time
                :default-time="['00:00:00', '23:59:59']"
                format="YYYY-MM-DD HH:mm:ss"
                allowClear
              >
              </a-range-picker>
            </template>
          </a-form-model-item>
        </div>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import SelectOption from './SelectEnum.vue'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
export default {
  components: {
    SelectOption
  },
  props: {
    options: {
      type: Array,
      require: true
    },
    form: {
      type: Object,
      require: true
    },
    inline: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      other: '',
      inputPlaceholder: '请输入',
      rules: {},
      locale
    }
  },
  created() {
    console.log('options', this.options)
    this.initFormRules()
  },
  methods: {
    onSubmit() {
      return this.$refs.ruleForm.validate();
    },
    //重置
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    //初始化参数
    initFormRules() {
      for (let item of this.options) {
        for (let col of item) {
          if (col.rules && col.rules.length > 0) {
            this.rules[col.field] = col.rules
          }
        }
      }
      console.log(' this.rules', this.rules)
    },
    changeValue(e) {
      console.log('e', e)
    },
    //回车搜索
    enterSearchData() {
      this.$emit('enterSearchData')
    }
  }
}
</script>

<style lang="scss" scoped>
.form-data {
  width: 100%;
  .form-item-inline {
    display: inline-block;
  }
}
/deep/ .ant-form-item-label {
  width: 110px !important;
}
.ant-select-selection {
  width: 214px;
}
/deep/.ant-form-item-control {
  width: 230px !important;
}
</style>
